<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--0:引入 vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .alert{
            width: 300px;
            height: 100px;
            background-color: aqua;
            margin-left: 160px;
        }
    </style>
</head>
<body>
    <div id ="app2">
        <!--按钮-->
        <button @click ="openIt">显示对对话框</button>

        <div  v-show="open"    class="alert">
            <!--要显示的一些内容-->
            你的浏览器版本。。。。。。。！
            <!--点击后关闭-->
            <span @click="closeIt">X</span>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el:"#app2",
            data:{
                open:false,//是否显示实例变量

            },
            methods:{
                //打开对话框
                openIt(){
                    this.open = true;
                },
                //关闭对话框
                closeIt(){
                    this.open = false;
                }
            }

        });
    </script>
    
</body>
</html>